<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报表维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">

    <meta name="msapplication-TileColor" content="#62a8ea">
    <!-- <link href="./bootstrap.css" th:href="@{/bootstrap.css}" rel="stylesheet">-->
    <link href="./css/base/web-icon.css" th:href="@{/css/base/web-icon.css}" rel="stylesheet">
    <link href="./css/base/site.css" th:href="@{/css/base/site.css}" rel="stylesheet">
    <link href="./css/base/base.css" th:href="@{/css/base/base.css}" rel="stylesheet">
    <!-- 插件 CSS -->

    <script src="../public/js/vendor/jquery/jquery.min.js" th:src="@{/js/vendor/jquery/jquery.min.js}"></script>
    <script src="../public/js/vendor/jquery-validation/jquery.validate.min.js"
            th:src="@{/js/vendor/jquery-validation/jquery.validate.min.js}"></script>

    <link rel="stylesheet" href="../public/js/layui/css/layui.css" th:href="@{/js/layui/css/layui.css}" media="all">
    <script src="../public/js/layui/layui.all.js" th:src="@{/js/layui/layui.all.js}"></script>


</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">站点名称</label>
            <div class="layui-input-inline">
                <input type="text" name="siteName" id="siteName" placeholder="请输入站点" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属医院</label>
            <div class="layui-input-block">
                <select name="hospital" lay-verify="required" id="hospital">
                    <option value=""></option>
                    <option value="0">中心医院</option>
                    <option value="1">附属医院</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">

            <button class="layui-btn" data-type="reload" lay-filter="" id="btn-search" name="btn-search">查询
            </button>

            <button type="reset" class="layui-btn " id="btn-add">新增</button>
            <button type="reset" class="layui-btn " id="btn-del">删除</button>
        </div>
    </div>


</form>

<div style="display: none" id="ShowDiv">
    <form class="layui-form" action="" id="addAndEidt">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="form-userName" lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select name="form-department" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="form-phone" lay-verify="required" placeholder="请输入手机号"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="form-role" lay-verify="required">
                        <option value=""></option>
                        <option value="0">超级管理员</option>
                        <option value="1">科员</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="form-pwd" lay-verify="required" placeholder="请输入密码"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="form-sure-pwd" lay-verify="required" placeholder="请输入密码"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <!-- <div class="layui-row">
             <div class="layui-inline">
                 <button type="reset" class="layui-btn " id="btn-form-sure">确定</button>
                 <button type="reset" class="layui-btn layui-btn-normal" id="btn-form-cancel">取消</button>
             </div>
         </div>-->
    </form>
</div>

<div class="layui-row" style="float: right">
    <div class="layui-inline">

        <button class="layui-btn" data-type="reload" lay-filter="" id="btn-export" name="btn-export">导出
        </button>

        <button type="reset" class="layui-btn " id="btn-import" name="btn-import">导入</button>

    </div>
</div>
<div class="layui-row">


    <table id="siteDt" lay-filter="siteDt"></table>
    <script type="text/html" id="userInfo-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="scan-phone" style="color: white">车辆编号查看</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="scan-diver" style="color: white">司机查看</a>
    </script>
</div>
<script th:inline="none">
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        form.render();


    });

    layui.use(['layer', 'table'], function () {
        var table = layui.table;

        var obj = new Object()
        obj.sitename = ''
        obj.hospitalcode = ''

        table.render({
            elem: "#siteDt",
            id: 'userId',
            height: 600,
            url: "/admin/siteInfo",
            where: obj,
            method: "get",
            id: "userTable",
            page: true,
            cols: [[
                /*{type: 'checkbox', width: 50},*/
                {field: "sitecode", title: "站点Id", sort: false, hide: true, fixed: 'left', align: 'center'},
                {field: "sitename", title: "站点名称", sort: false, fixed: 'left', align: 'center'},
                {field: "hospitalName", title: "所属医院", sort: false, fixed: 'left', align: 'center'},

                {title: '查看', align: 'center', toolbar: '#userInfo-toolbar'}

            ]]
            ,done: function(res, curr, count){
                this.where={};
                //不清空，有问题：搜索条件会保留
                //清空，  有问题：分页的时候没有搜索条件了,分页会受到影响
            }



        });


        function reloadData() {
            var siteName = $("#siteName").val();

            var hospitalCode = $("#hospital").val();
            var obj = new Object()
            obj.sitename = siteName
            obj.hospitalcode =hospitalCode

            table.reload({
                where:  obj
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,done: function(res, curr, count){
                this.where={};
                //不清空，有问题：搜索条件会保留
                //清空，  有问题：分页的时候没有搜索条件了,分页会受到影响
            }
            });
        }

        //查询
        $('#btn-search').on('click', function () {

            reloadData();

        });
        //删除
        $("#btn-del").click(function () {
            table.on('checkbox(userDt)', function (obj) {
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            });
        })

        //导出
        $("#btn-export").click(function () {
            table.exportFile([]
                , 'xls'); //默认导出 csv，也可以为：xls
        })

        //新增
        $("#btn-add").click(function () {
            //自定页

            layer.open({
                title: '编辑用户信息',
                type: 1,
                area: ['600px', '600px'],

                closeBtn: 1, //不显示关闭按钮
                anim: 2,
                btn: ['确定', '取消'],
                shadeClose: true, //开启遮罩关闭
                content: $("#ShowDiv").html(),
                yes: function (index) {
                    layer.close(index);
                    alert(1)
                }
            });
        })


        //监听行工具事
        table.on('tool(userDt)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    })


</script>
</div>

</body>
</html>